<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/axios/dist/axios.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>

<body>
    <button class="btn1">发送多个axios请求</button>
    <button class="btn2">发送延迟请求</button>
    <button class="btn3">取消axios请求</button>
    <script>
        // 一、发送多个axios请求 ： 同时发送多个axios请求，不是依次 。类似 Promise.all([p1,p2,p3]);
        let btn1 = document.querySelector(".btn1");
        btn1.onclick = function () {
            // axios.get("/getdata").then(res=>{
            //     console.log(res);
            // })
            // axios.post("/getpostdata").then(res=>{
            //     console.log(res);
            // })
            axios.all([axios.get("/getdata"), axios.post("/getpostdata")]).then(res => {
                console.log(res);
            })
        }

        // 二、取消axios请求
        let btn2 = document.querySelector(".btn2");
        // 定义一个全局变量来存储取消axios的函数
        let cancel;
        btn2.onclick = async function () {
            if(cancel){
                cancel();  // 取消上一个axios请求
            }
            try {
                let { data } = await axios.get("/timedata", {
                    cancelToken: new axios.CancelToken(function (c) {
                            // cancel 就是取消axios的函数，执行这个cancel函数就可以取消axios
                            // cancel()
                            cancel = c;
                    })
                });
                console.log(data);
            } catch (err) {
                console.log("??",err);
                // if(err){
                //     console.log("取消了axios");
                // }
                
                // axios 提供一个 isCancel 来判断错误  是否是一个取消axios的错误
               console.log( axios.isCancel(err));  // 如果是一个取消axios的错误 那么就返还true，否则就返还false
               if(axios.isCancel(err)){
                console.log("axios被手动取消了!!");
               }


            }
        }


        // 取消请求
        let btn3 = document.querySelector(".btn3");
        btn3.onclick = function () {
            cancel(); // 取消axios请求
        }


        /* 
        一、axios 可以同时执行多个 axios请求
        二、取消axios请求
            1. 获取 cancel函数 且取消axios
            2. 判断 错误是否是取消axios的错误 isCancel(err);
            3. 防止不停点击发送axios的问题。 判断在取消axios就可以了。
        
        
        
        */

    </script>
</body>

</html>